<template>
  <div>
    <l double>
      <template #l1>1</template>
      <template #l2>2</template>
    </l>

    这样用好点吧
    <l>
      <l>1</l>
      <l>2</l>
    </l>

    <l note="导航">
      <l note="左边">
        <l note="logo" ref="logo" :hidden="{ media: 600 }">
          <slot name="logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="160" height="34" viewBox="0 0 160 34">
              <path d="M38.37,5.25,35.6,18.83c-.6,3-2.15,4.45-4.68,4.45s-4-1.35-4-3.54a8.39,8.39,0,0,1,.06-1l2.8-13.49h-25L0,28.73H6.4l1.75-8.65h9.6l1.11-5.43H9.26L10,11H22.21L21,16.91a16.05,16.05,0,0,0-.37,3.17c.07,4.48,2.26,7,4.88,8a11.28,11.28,0,0,0,4.79,1C37,29.08,40.54,25.71,41.91,19l1.62-7.91h7.31l-3.6,17.68h6.4l3.6-17.68h6.23l1.18-5.8Z"
                    style="fill:#fff"></path>
              <path d="M76.06,4.92c-7.65-.17-14.42,6.5-14.22,13.37A10,10,0,0,0,65.21,26a12.32,12.32,0,0,0,8.59,3A10.32,10.32,0,0,0,80,27.37L81.28,21a11.28,11.28,0,0,1-7,2.33A6,6,0,0,1,70,21.81a5.27,5.27,0,0,1-1.68-4,6.79,6.79,0,0,1,2.12-5,6.92,6.92,0,0,1,5.12-2.15,9.29,9.29,0,0,1,7.2,3.06L84,7.52C82.15,5.79,79.49,4.92,76.06,4.92Z"
                    style="fill:#fff"></path>
              <path d="M106.64,8a12.6,12.6,0,0,0-8.75-3.1A14.21,14.21,0,0,0,90.71,6.8a14,14,0,0,0-5.15,5,12.23,12.23,0,0,0-1.85,6.5,10.08,10.08,0,0,0,3.43,7.88,12.79,12.79,0,0,0,8.86,3,13.84,13.84,0,0,0,10.11-4,12.85,12.85,0,0,0,4-9.27A10,10,0,0,0,106.64,8Zm-5.25,13.35a6.82,6.82,0,0,1-5,2.16A6.11,6.11,0,0,1,92,21.89a5.33,5.33,0,0,1-1.68-4.1,6.82,6.82,0,0,1,2.15-5,7,7,0,0,1,5.06-2.15,5.81,5.81,0,0,1,4.31,1.68,5.5,5.5,0,0,1,1.68,4.14A6.81,6.81,0,0,1,101.39,21.37Z"
                    style="fill:#fff"></path>
              <polygon points="114.49 5.25 109.71 28.73 116.11 28.73 120.89 5.25 114.49 5.25" style="fill:#fff"></polygon>
              <polygon points="139.58 5.25 137.06 17.65 124.23 4.32 119.24 28.73 125.37 28.73 127.9 16.4 140.73 29.68 145.71 5.25 139.58 5.25"
                       style="fill:#fff"></polygon>
              <circle cx="153.26" cy="16.99" r="6.74" style="fill:#EC9A3C"></circle>
            </svg>
          </slot>
        </l>
        <l note="语言">
          <slot name="语言">
            <img src="http://local.futcoin.com/common/flags/4x3/jp.svg" />
            <l :hidden="{ hidden: refs.logo?.isHidden }"><ee-shape shape="down" /></l>
          </slot>
        </l>
        <l note="货币">
          <slot name="货币">
            USD
            <l :hidden="{ hidden: refs.logo?.isHidden }"><ee-shape shape="down" /></l>
          </slot>
        </l>
      </l>

      <l style="flex-basis: 60%; justify-content: center" note="小屏logo" :hidden="{ hidden: !refs.logo?.isHidden }">
        <svg xmlns="http://www.w3.org/2000/svg" width="54" height="40" viewBox="0 0 54 40">
          <path d="M0,31.4,4.65,8.59H21.14L20,14.19H9.72L9,17.72h9.33L17.25,23H7.92L6.22,31.4Z" style="fill:#fff">
          </path>
          <path d="M33.45,8.27c3.34,0,5.92.81,7.79,2.52l-1.21,6a9,9,0,0,0-7-3,6.71,6.71,0,0,0-5,2.08A6.58,6.58,0,0,0,26,20.72a5.14,5.14,0,0,0,1.63,3.93,5.79,5.79,0,0,0,4.16,1.5,11,11,0,0,0,6.77-2.26l-1.27,6.17a10,10,0,0,1-6.06,1.64,12,12,0,0,1-8.31-2.91,9.71,9.71,0,0,1-3.27-7.53C19.44,14.58,26,8.1,33.45,8.27Z"
                style="fill:#fff"></path>
          <circle cx="47.45" cy="20" r="6.55" style="fill:#EC9A3C"></circle>
        </svg>
      </l>

      <l note="右边" flex>
        <l note="导航" flex style="justify-content: right;">
          <l ref="nav" tag="ul" note="长导航" :hidden="{ wrap: true }">
            <li>Buy FIFA coins</li>
            <li>FC 24 coins</li>
            <li>Reviews</li>
            <li>Faq</li>
            <li>Blog</li>
            <li>Giveaway</li>
          </l>
          <l note="导航按钮">
            <ee-shape shape="setting" /> Menu
          </l>
        </l>
        <l note="积分" :hidden="{ hidden: refs.logo?.isHidden }">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M13.38,9.94c0-.72-.51-1.15-1.38-1.15H10.54v2.28h1.37C12.84,11.07,13.38,10.66,13.38,9.94Z"></path>
            <path d="M12.07,12.62H10.54v2.59h1.54c1.05,0,1.63-.51,1.63-1.32S13.07,12.62,12.07,12.62Z"></path>
            <path
                  d="M21.83,11.38l-1-1.78v-2a1.26,1.26,0,0,0-.61-1.08l-1.71-1-1-1.76a1.26,1.26,0,0,0-1.08-.61h-2l-1.74-1a1.22,1.22,0,0,0-1.25,0l-1.74,1h-2a1.26,1.26,0,0,0-1.08.61l-1,1.72-1.8,1A1.29,1.29,0,0,0,3.2,7.56V9.68l-1,1.72a1.16,1.16,0,0,0,0,1.22l1,1.72V16.4a1.26,1.26,0,0,0,.61,1.08l1.78,1,1,1.72a1.26,1.26,0,0,0,1.08.61h2l1.74,1A1.25,1.25,0,0,0,12,22a1.19,1.19,0,0,0,.61-.17l1.74-1h2a1.26,1.26,0,0,0,1.08-.61l1-1.76,1.71-1a1.26,1.26,0,0,0,.61-1.08v-2l1-1.78A1.15,1.15,0,0,0,21.83,11.38ZM12.8,17H8V7h4.66c2,0,3.18.94,3.18,2.49A2.14,2.14,0,0,1,14,11.62v.14a2.37,2.37,0,0,1,2.3,2.36C16.3,15.87,14.94,17,12.8,17Z">
            </path>
          </svg>
          10
        </l>
        <l note="用户">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path
                  d="M12,2A10,10,0,0,0,2,12c0,.33,0,.65,0,1,0,.12,0,.23.05.35s0,.4.09.59.06.28.1.42l.12.48.15.46c0,.13.09.27.15.4a5,5,0,0,0,.21.48c.05.11.1.22.16.33s.17.34.27.5l.15.25c.11.18.22.35.34.52l.12.17a10,10,0,0,0,4.78,3.53l.09,0a10.93,10.93,0,0,0,1.42.36l.25,0A10.59,10.59,0,0,0,12,22a10.59,10.59,0,0,0,1.5-.12l.25,0a10.93,10.93,0,0,0,1.42-.36l.09,0A10,10,0,0,0,20,17.92l.12-.16c.12-.17.23-.35.34-.53l.15-.25q.15-.26.27-.51l.15-.32.21-.49c0-.13.1-.26.14-.39s.11-.31.15-.46.08-.32.12-.48.07-.28.1-.42.06-.39.09-.59,0-.23.05-.35A6.24,6.24,0,0,0,22,12,10,10,0,0,0,12,2Zm0,18a7.94,7.94,0,0,1-6.15-2.89c.84-.44,1.86-.82,2.67-1.19,1.45-.65,1.3-1.05,1.35-1.59a1.48,1.48,0,0,0,0-.21,4.53,4.53,0,0,1-1.2-1.8h0v0a4.42,4.42,0,0,1-.15-.48c-.33-.07-.53-.44-.61-.79a1.61,1.61,0,0,1-.2-.87c0-.51.26-.74.49-.83V9.23a13.86,13.86,0,0,1,.17-2.15,3,3,0,0,1,.11-.5A3.64,3.64,0,0,1,9.73,4.72,3.93,3.93,0,0,1,12,4a3.84,3.84,0,0,1,2.27.73,3.6,3.6,0,0,1,1.26,1.86,4,4,0,0,1,.11.5,13.76,13.76,0,0,1,.17,2.15v.09a.88.88,0,0,1,.46.82,1.52,1.52,0,0,1-.2.87.94.94,0,0,1-.6.78,3.82,3.82,0,0,1-.15.48l0,.05a4.47,4.47,0,0,1-1.17,1.78c0,.08,0,.16,0,.23,0,.54-.15.94,1.31,1.59.81.36,1.84.74,2.68,1.19A8,8,0,0,1,12,20Z">
            </path>
          </svg>
          <l :hidden="{ hidden: refs.logo?.isHidden }">li</l>
          <l :hidden="{ hidden: refs.logo?.isHidden }"><ee-shape shape="down" /></l>
        </l>
      </l>
    </l>

  </div>
</template>

<script type="text/javascript">
import refs from '@/ee-ui/__mixin/relation/refs'
import l from '../ee-ui/layout/l.vue'

export default {
  name: "test-ee-layout",
  mixins: [refs],
  data() {
    return {
    }
  },
  props: {
  },
  computed: {
  },
  methods: {
  },
  mounted() {

  },
}
</script>

<style lang="scss" scoped>
div {
  background-color: black;
  color: #eee;
  fill: currentColor;

  img {
    width: 32px;
  }
}
</style>